<template>
  <div class="eheader around" v-show="loading">
    <div class="ac cWidth pointer between">
      <div class="eheaderLeft">个人简历</div>
      <div class="ac">
        <div
          class="eheaderItem"
          @click="tabClick(item, index)"
          :class="{ aeheaderItem: currentPage == index }"
          v-for="(item, index) in tabData"
          :key="item.title"
          v-show="!item.hide"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useAllStore } from "@/stores/index";
import { storeToRefs } from "pinia";
import gsap from "gsap";
const nuxtApp = useNuxtApp();
const store = useAllStore();
 const route=useRoute()
let link=route.query.link
let eid=route.params.ename
const tabData = [
  { title: "基本信息", link: `/${eid}?link=${link}` },
  { title: "项目经验", link: `` },
  { title: "联系我", link: `/link_${eid}?link=${link}`,hide:process.client? document.documentElement.clientWidth<1055:true },
];
let currentPage = ref<null | number>(null);
const isScroll = ref(false);
const loading=ref(false)
onMounted(() => {
  loading.value=true
  if (localStorage.getItem("currentPage"))currentPage.value = JSON.parse(localStorage.getItem("currentPage") || "0");
  setTimeout(() => {
    const bodyHeight = document.documentElement.clientHeight;
    gsap.to(document.documentElement, {
      ease: "power2.inOut",
      yoyo: true,
      duration: 1,
      scrollTop: bodyHeight * Number(currentPage.value || 0),
    });
  }, 100);
 setTimeout(() => {
  window.addEventListener("scroll", () => {
    if (isScroll.value) return;
    let currentPag =
      document.documentElement.scrollTop >
      document.documentElement.clientHeight - 100;
    currentPage.value = currentPag ? 1 : 0;
  });
  }, 1100);
});
const timer=ref(null)
const router=useRouter()
interface tabItem {
  title: string;
  link: string;
}
function tabClick(item: tabItem, index: number) {
     if(timer.value) {clearTimeout(timer.value);
  timer.value = null;}
  isScroll.value = true;
  localStorage.setItem("currentPage", JSON.stringify(index));
  currentPage.value = index;
  const bodyHeight = document.documentElement.clientHeight;
  if (item.link == `/${eid}?link=${link}` && route.name == "ename")
    return gsap.to(document.documentElement, {
      ease: "power2.inOut",
      yoyo: true,
      duration: 1,
      scrollTop: 0,
    });
  if (!item.link) {
    navigateTo(`/${eid}?link=${link}`);
    setTimeout(() => {
      gsap.to(document.documentElement, {
        ease: "power2.inOut",
        yoyo: true,
        duration: 1,
        scrollTop: bodyHeight,
      });
    }, 100);
  } else {
    navigateTo(item.link);
  }
 timer.value=   setTimeout(()=>{
  isScroll.value = false;
  },1100)
}
</script>

<style scoped lang="scss">
.eheader {
  height: 60px;
  position: fixed;
  background: rgba(255, 255, 255, 0.66);
  width: 100%;
  top: 0;
  z-index: 99;
  box-sizing: border-box;
  box-shadow: 0px -2px 25px 0px rgba(210, 210, 210, 0.25);
  .eheaderLeft {
    font-family: "AlimamaShuHeiTi";
    font-size: 28px;
  }
  .aeheaderItem {
    background: #ff6a68;
    color: #fff;
  }
  .eheaderItem {
    margin-left: 30px;
    padding: 5px 20px;

    font-size: 13px;
    border-radius: 5px;
    font-weight: bolder;
  }
}
@media screen and (max-width: 600px) {
.eheader {
  height: 40px;
  padding: 0 20px ;
  box-sizing: border-box;
  .eheaderLeft {
    font-size: 16px;
  }
  .aeheaderItem {
  }
  .eheaderItem {
    margin-left: 5px;
    padding: 5px 10px;
  }
}
}
</style>
